<template>
	<view class="models-page">
		<view class="models-header">
			<hsb-business-model-search
				placeholder="请输入您想要售卖的机型名称"
				@search="$emit('search')"
			/>
			<hsb-business-model-category
				:list="categoryList"
				:active="activeCategory"
				@change="changeCategory"
			/>
		</view>
		<view class="models-body">
			<view class="brand-content">
				<hsb-business-model-brand
					:list="brandList"
					:active="activeBrand"
					@change="changeBrand"
				/>
			</view>
			<view class="product-content">
				<hsb-business-model-series
					:list="seriesList"
					:active="activeSeries"
					@change="changeSeries"
				/>
				<view class="model-product-body">
					<hsb-business-model-product
						:list="productList"
						:active="activeCategory"
						@pull-up="loadMore"
						@product="$emit('product', $event)"
					>
						<view v-if="productFirstStatus" class="product-data-status">
							<view v-if="noData" class="product-nodata">
								<image class="icon-nodata" src="@/static/images/icon_null.png"></image>
								<view class="nodata-text">暂无数据</view>
							</view>
							<view v-if="productLoadStatus" class="status">加载中...</view>
							<view v-else-if="finished" class="status">没有更多数据啦～</view>
						</view>
					</hsb-business-model-product>
					<view v-if="!productFirstStatus && productLoadStatus" class="product-loading">
						<view class="spinner-cycle-loading">
							<uv-loading-icon size="50rpx" color="rgba(255, 225, 0, 0.8)" />
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex'

export default {
	computed: {
		...mapState({
			categoryList: state => state.model.categoryList,
			brandList: state => state.model.brandList,
			seriesList: state => state.model.seriesList,
			productList: state => state.model.modelProductList,
			activeCategory: state => state.model.activeCategory,
			activeBrand: state => state.model.activeBrand,
			activeSeries: state => state.model.activeSeries,
			categoryLoadStatus: state => state.model.categoryLoadStatus,
			brandLoadStatus: state => state.model.brandLoadStatus,
			seriesLoadStatus: state => state.model.seriesLoadStatus,
			productLoadStatus: state => state.model.productLoadStatus,
			productFirstStatus: state => state.model.productFirstStatus,
			productPageInfo: state => state.model.productPageInfo
		}),
		noData () {
			return !this.productLoadStatus && this.productList.length === 0
		},
		finished () {
			return this.productList.length && this.productPageInfo.total <= this.productList.length
		}
	},
	methods: {
		initModels () {
			if (this.categoryList.length === 0 || this.brandList.length === 0) {
				return this.$store.dispatch('model/getCategoryList', {})
			}
			this.changeBrand({ brandId: this.activeBrand })
		},
		changeCategory ({ classId }) {
			if (this.brandLoadStatus || this.seriesLoadStatus || this.productLoadStatus) return
			this.$store.dispatch('model/changeCategory', { classId })
		},
		changeBrand ({ brandId }) {
			if (this.seriesLoadStatus || this.productLoadStatus) return
			this.$store.dispatch('model/changeBrand', { brandId })
		},
		changeSeries ({ seriesId }) {
			if (this.seriesLoadStatus || this.productLoadStatus) return
			this.$store.dispatch('model/changeSeries', { seriesId })
		},
		loadMore () {
			if (
				this.finished ||
				this.categoryLoadStatus ||
				this.brandLoadStatus ||
				this.seriesLoadStatus ||
				this.productLoadStatus
			) return
			this.$store.dispatch('model/getProductList', { more: true })
		}
	},
	mounted () {
		this.initModels()
	}
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
